<template>
  <!-- <selectFarmType @farmtypemessage="getfarmtypemessage"> -->
  <div class="farmtypemain">
    <div style="">
      基地名称:
      <el-input v-model="organizationName" style="width: 18.75rem; margin-bottom: 1.25rem" clearable
        @input="getbasemessage" />
    </div>
    <div class="farmtypemain-view">
      <div v-for="(item, index) in selectList" :key="index" class="base-box">
        <div class="base-box-title">{{ item.organizationName }}</div>
        <div class="selected-main">
          <el-checkbox-group v-model="item['checkList']" @change="
        checkfarming(
          $event,
          item.organizationNo,
          item['checkLists'],
          item.check
        )
        ">
            <el-checkbox v-for="(items, indexs) in farmingTypeList" :key="indexs" :label="items.farmingTypeNo">
              {{ items.farmingTypeName }}
            </el-checkbox>
          </el-checkbox-group>

          <div class="selected-button">
            <el-button style="position: absolute;bottom: .3125rem;right: .3125rem" type="info" round @click.stop="importPublicList(item.organizationNo)">初始化业态仓库类型</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- </selectFarmType> -->
</template>
<script>
// import selectFarmType from "@/components/selectFarmTypev3/index.vue";
import axios from "axios";
export default {
  components: {
    // selectFarmType
  },
  data() {
    return {
      selectList: [],
      nowselectid: 1,
      farmtypemessage: { organizationName: "大田种植", organizationNo: "dt" },
      farmingTypeList: [],
      checkList: [],
      organizationName: ""
    };
  },
  created() {
    let query = this.$route.params;
    if (query.organizationName && query.organizationName !== '') {
      this.organizationName = query.organizationName
      this.getbasemessage(query.organizationName)
    }
  },
  mounted() {
    this.getbasemessage();
    // this.queryDataList()
  },
  methods: {
    async importPublicList(organizationNo) {

      this.$confirm("此操作将初始化业态仓库类型, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "myClass"
      })
        .then(async () => {
          // console.log('111111111111111111111111111111')
          const { data: { data: { databaseName } } } = await axios({
            method: "get",
            url:
              this.$webSerUrlPro +
              `organization/organizationToDatabaseMapper/queryByOrganizationNo?no=` + organizationNo,
            data: {}
          });
          // console.log(databaseName)
          // return
          const { data: res } = await axios({
            method: "get",
            url:
              this.$webSerUrlPro +
              `inventory/warehouseSystem/initialization?organizationNo=` + organizationNo,
            data: {},
            headers: {
              organizationList: organizationNo,
              organizationNo: organizationNo,
              databaseName: databaseName,
              // farming: 'BREED'
            }
          });
          if (res.code === 1) {
            this.$message.success("导入成功！");
            // this.getbasemessage();
          } else {
            this.$message.warning(res.msg);
            // this.getbasemessage();
          }

        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消删除"
          // });
        });
    },
    // 获取下拉框信息
    async queryDataList() {
      // 获取物料类型
      const { data: res } = await axios({
        method: "post",
        url: this.$webSerUrlPro + `template/farmingType/queryByCondition`,
        data: {},
        params: {}
      });
      let basemes = res.data;
      // console.log(basemes)
      this.farmingTypeList = basemes;
    },
    // 获取基地
    getbasemessage(e) {
      axios({
        method: "post",
        url: this.$webSerUrlPro + `organization/organization/queryByCondition`,
        data: {
          organizationName: this.organizationName
        },
        params: {}
      }).then(async (response) => {
        let basemes = response.data.data;
        if (basemes && basemes[0]) {
          this.selectList = basemes;
          await basemes.forEach(async (item) => {
            this.$set(item, "checkList", []);
            this.$set(
              item,
              "check",
              await this.organizationFarmingTypeMap(item.organizationNo)
            );
            this.$set(
              item,
              "checkList",
              item.check.map((item) => item.farmingTypeNo)
            );
            this.$set(
              item,
              "organizationFarmingTypeMapperId",
              item.check.map((item) => item.organizationFarmingTypeMapperId)
            );
            this.$set(item, "checkLists", [...item.checkList]);
          });
          // console.log('可选择基地列表', basemes)
          this.queryDataList();
        } else {
          this.selectList = [];
        }
      });
    },
    // 获取当前基地的农业类型
    async organizationFarmingTypeMap(e) {
      const { data: res } = await axios({
        method: "post",
        url:
          this.$webSerUrlPro +
          `organization/organizationFarmingTypeMapper/queryByCondition`,
        data: { organizationNo: e }
      });
      let basemes = res.data;
      if (basemes && basemes[0]) {
        return basemes;
      } else {
        return [];
      }
    },
    async checkfarming(v, e, x, list) {
      let farming = this.newArr(x, v);
      console.log(farming);
      let formData = {};
      this.farmingTypeList.forEach((item) => {
        if (farming[0] === item.farmingTypeNo) {
          formData = item;
        }
      });
      formData.organizationNo = e;
      if (formData.farmingTypeNo) {
        // return
        if (x.findIndex((item) => item === formData.farmingTypeNo) !== -1) {
          let organizationFarmingTypeMapperId;
          list.forEach((item) => {
            if (farming[0] === item.farmingTypeNo) {
              organizationFarmingTypeMapperId =
                item.organizationFarmingTypeMapperId;
            }
          });
          this.$confirm("删除该农业类型, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.delete(organizationFarmingTypeMapperId);
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除"
              });
            });
        } else {
          this.$confirm("添加农业类型, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              // this.$message({
              //   type: 'success',
              //   message: '删除成功!'
              // });
              this.add(formData);
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消"
              });
            });
        }
      }
    },
    newArr(oldData, newData) {
      // 去重
      let arr1 = new Set(oldData); // 原数组
      let arr2 = new Set(newData); // 新数组
      let List = [];
      // for of：循环数组的值
      console.log(newData.length, oldData.length);
      if (newData.length >= oldData.length) {
        for (let k of arr2) {
          // 对比数组每一项，没有的就添加到空数组
          if (!arr1.has(k)) {
            List.push(k);
          }
        }
      } else {
        // console.log(arr1, arr2)
        for (let k of arr1) {
          // 对比数组每一项，没有的就添加到空数组
          // console.log(k, '222222')
          if (!arr2.has(k)) {
            List.push(k);
          }
        }
      }
      return List; // 这里拿到了差值数据返回出去
    },
    async add(formData) {
      const { data: res } = await axios({
        method: "post",
        url:
          this.$webSerUrlPro + `organization/organizationFarmingTypeMapper/add`,
        data: formData
      });
      if (res.code === 1) {
        this.$message.success("添加成功！");
        this.getbasemessage();
      } else {
        this.$message.warning(res.msg);
        this.getbasemessage();
      }
    },
    async delete(id) {
      const { data: res } = await axios({
        method: "get",
        url:
          this.$webSerUrlPro +
          `organization/organizationFarmingTypeMapper/del?organizationFarmingTypeMapperId=` +
          id
        // data: formData
      });
      if (res.code === 1) {
        this.$message.success("删除成功！");
        this.getbasemessage();
      } else {
        this.$message.warning(res.msg);
        this.getbasemessage();
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.farmtypemain {
  height: 100%;
  position: relative;
  overflow: hidden;

  .farmtypemain-view {
    width: 100%;
    height: calc(100% - 3.125rem);
    display: flex;
    flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: distribute;
    justify-content: flex-start;
    flex-direction: row;
    overflow-y: auto;

    .base-box {
      width: 32%;
      height: 12.5rem;
      margin-bottom: .625rem;
      cursor: pointer;
      // background-image: url("~@/assets/index-bgc.png");
      background-size: cover;
      position: relative;
      border: #009fa5 .0625rem solid;
      margin-right: .625rem;

      .base-box-title {
        width: 100%;
        height: 1.875rem;
        line-height: 1.875rem;
        text-align: center;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9;
        background-color: rgba(23, 24, 24, 0.2);
        letter-spacing: .0625rem;
        white-space: nowrap;
        color: #fff;
        overflow: hidden;
      }

      .selected-main {
        width: 100%;
        height: 12.5rem;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(23, 24, 24, 0.6);
        background-size: cover;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border: #009fa5 .0625rem solid;

        .selected-button {
          position: absolute;
          bottom: .625rem;
          right: .625rem;
        }

        .selected-main-line1 {
          width: 100%;
          height: 1.875rem;
          line-height: 1.875rem;
          text-align: center;
          letter-spacing: .0625rem;
          white-space: nowrap;
          font-size: .875rem;
        }

        .selected-main-line2 {
          width: 100%;
          height: 1.5625rem;
          margin-top: .625rem;
          display: flex;
          justify-content: center;

          .selected-main-line2-but {
            width: 6.25rem;
            height: 1.5625rem;
            line-height: 1.5625rem;
            text-align: center;
            background: rgb(32, 22, 22);
            border-radius: .3125rem;
            color: #00d5cd;
            border: .0625rem solid #00d5cd;
            font-size: .875rem;
            letter-spacing: .0625rem;
          }

          .selected-main-line2-but:hover {
            background: #00d5cd;
            color: rgb(32, 22, 22);
          }

          .selected-main-line2-but:first-of-type {
            margin-right: .625rem;
          }
        }
      }
    }
  }
}

::v-deep {
  .el-checkbox {
    margin-right: 1rem;

    .el-checkbox__label {
      color: #fff;
    }

    &.is-checked .el-checkbox__label {
      color: #61aa47;
    }
  }
}
</style>
